<script setup>
import { pick } from 'lodash-es';
import { useRouter } from '@/router/index.js';
import { useWatch } from '@/hooks/useWatch.js';
import { engTypeDisplay } from '@/views/hooks.js';
import { TableList } from '@/components/MainComponents.js';
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  type: {
    type: String,
    default: () => 'TG',
  },
  showTable: {
    type: Boolean,
    default: () => false,
  },
});
const tableWrapper = ref(null);
const contBoxHeight = ref(600);
const pageNum = ref(1);
const pageSize = ref(10);
const currentTableData = ref([]);
const isQiankun = window.__POWERED_BY_QIANKUN__;
const router = useRouter();
const columJC = ref({
  index: true,
  columnData: [
    {
      text: true,
      prop: 'uscc',
      label: '机构代码',
      align: 'center',
    },
    {
      text: true,
      prop: 'inName',
      label: '机构名称',
      align: 'center',
    },
    {
      text: true,
      prop: 'address',
      label: '机构地址',
      align: 'center',
    },
    {
      text: true,
      prop: 'statusName',
      label: '监测状态',
      align: 'center',
    },
    {
      text: true,
      prop: 'serviceYears',
      label: '服务年限',
      align: 'center',
    },
    {
      text: true,
      prop: 'energyType',
      label: '监测能源类型',
      align: 'center',
    },
    {
      text: true,
      prop: 'runningTime',
      label: '投运时间',
      align: 'center',
    },
    {
      text: true,
      prop: 'usage',
      label: '总能耗（tce）',
      align: 'center',
    },
    {
      text: true,
      prop: 'carbonEmission',
      label: '总碳排（tCO2）',
      align: 'center',
    },
    {
      label: '操作',
      align: 'center',
      operations: [
        {
          type: 'text',
          label: '进入',
          buttonClick: row => {
            sessionStorage.setItem('amountRes', JSON.stringify(row));
            sessionStorage.setItem('entInfo', JSON.stringify(row));
            if (isQiankun) {
              router.push({
                path: '/zhny/em/orgMgmt/overview',
                query: { JCCode: row.enterpriseCode },
              });
            }
          },
        },
      ],
    },
  ],
});
const columTG = ref({
  index: true,
  columnData: [
    {
      text: true,
      prop: 'uscc',
      label: '机构代码',
    },
    {
      text: true,
      prop: 'inName',
      label: '机构名称',
    },
    {
      text: true,
      prop: 'address',
      label: '机构地址',
    },
    {
      text: true,
      prop: 'statusName',
      label: '托管阶段',
    },
    {
      text: true,
      prop: 'serviceYears',
      label: '托管年限',
    },
    {
      text: true,
      prop: 'runningTime',
      label: '投运时间',
    },
    {
      text: true,
      prop: 'agreementType',
      label: '托管机构合同类型',
    },
    {
      text: true,
      prop: 'agreementAmount',
      label: '投资总额（元）',
    },
    {
      text: true,
      prop: 'energyType',
      label: '托管能源类型',
    },
    {
      text: true,
      prop: 'usage',
      label: '能耗总量(tce)',
    },
    {
      text: true,
      prop: 'saving',
      label: '节能总量(tce)',
    },
    {
      text: true,
      prop: 'savingIncome',
      label: '项目收益(元)',
    },
    {
      text: true,
      prop: 'reduction',
      label: '碳排量（tcO2）',
    },
    {
      label: '操作',
      operations: [
        {
          type: 'text',
          label: '进入',
          buttonClick: row => {
            const amountRes = pick(row, [
              'totalEnergyValue',
              'totalWaterEnergyValue',
              'totalElectricityEnergyValue',
              'totalAirEnergyValue',
              'totalBasisEnergyValue',
              'totalDioxideValue',
              'totalEnergyCostValue',
              'totalBasisCostValue',
            ]);
            sessionStorage.setItem('amountRes', JSON.stringify(amountRes));
            sessionStorage.setItem('entInfo', JSON.stringify(row));
            if (isQiankun) {
              router.push({
                path: '/zhny/em/orgMgmt/overview',
                query: { TGCode: row.enterpriseCode },
              });
            }
          },
        },
      ],
    },
  ],
});
const getTableData = data => data?.slice((pageNum.value - 1) * pageSize.value, pageNum.value * pageSize.value) ?? [];
const getList = e => {
  pageNum.value = e.page;
  pageSize.value = e.limit;
  currentTableData.value = getTableData(props.tableData);
};

useWatch(
  () => props.tableData,
  n => {
    currentTableData.value = getTableData(n);
  },
);
useWatch(
  () => props.showTable,
  n => {
    if (n) contBoxHeight.value = tableWrapper.value.clientHeight - 127;
  },
);
</script>

<template>
  <div ref="tableWrapper" class="u-p20 u-base-fg">
    <div class="u-prim-text u-fs16 u-mb20 u-lh20">站点列表</div>
    <TableList
      :tableData="currentTableData"
      :columObj="type === 'TG' ? columTG : columJC"
      :pageObj="{ pageNum, pageSize }"
      :total="tableData?.length ?? 0"
      :height="contBoxHeight"
      @getList="getList"
    >
      <!-- <template v-slot:energyType="{ scope }">
        {{ engTypeDisplay(scope.row.energyType) }}
      </template> -->
    </TableList>
  </div>
</template>

<style lang="scss" scoped>
.u-lh20 {
  height: 20px;
  line-height: 20px;
}
</style>
